.dialog{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: all;
  background: $modalDialogBg;
  z-index: 101;

  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s;
  opacity: 1;

  &.visible{
    // display: none !important;
    opacity: 0;
    pointer-events: none;
  }

  @include InlineAnimation(0.12s ease-in-out){
    0%{
      background-color: transparent;
      opacity: .5;
    }
    100%{
      background-color: $modalDialogBg;
    }
  }

  $darkModeDialogBg: darken($modalDialogBg, 5);

  @include DarkThemeOverride{
    background: rgba($darkModeDialogBg, .9);
    
    @include InlineAnimation(0.12s ease-in-out) {
      0% {
        background-color: transparent;
        opacity: 0.5;
      }
      100% {
        background-color: rgba($darkModeDialogBg, 0.9);
      }
    }
  }

  &.visible{
    .dialogInner{
      opacity: 1;
    }
    backdrop-filter: blur(D(3px));
  }

  .dialogInner{
    transition: opacity .2s ease-in-out;
    // opacity: 0;
  }

  &.loadingDialog{
    *{
      color: #fff;
    }

    display: flex;
    flex-direction: column;

    .text{
      text-transform: uppercase;
      @include S(margin-bottom, 10px);
    }
  }

  &.gameLoadingDialog{
    display: flex;
    background: #eeeff5;
    flex-direction: column;
  }

  > .dialogInner{
    background: #fff;
    max-height: calc(100vh - #{D(40px)});
    @include S(border-radius, $globalBorderRadius);
    display: flex;
    flex-direction: column;
    @include S(padding, 12px);
    pointer-events: all;
    max-width: 900px;
    margin: 0 10px;

    @include DarkThemeOverride{
      background: darken($darkModeControlsBackground, 5);
    }

    &.warnning{
      // border: 4px solid $colorRedBright;
      .title{
        color: $colorRedBright;
      }
    }

    .closeButton{
      opacity: .7;
      @include S(width, 20px);
      @include S(height, 20px);
      cursor: pointer;
      pointer-events: all;
      transition: opacity .2s ease-in-out;
      &:hover{
        opacity: .4;
      }
      &{
        background: uiResource('icons/close.png') center center/80% no-repeat;
      }
    }

    &.multipleItemDialog{
      .multipleParent{
        display: grid;
        @include S(grid-gap, 5px);
        grid-template-columns: 1fr 1fr;
      }

      .item{
        position: relative;
        background: #eee;
        @include S(padding, 5px, 10px);
        @include PlainText;
        transition: background-color .12s ease-in-out;
        cursor: pointer;
        pointer-events: all;

        &:hover{
          background-color: #e7e7e7;
        }

        .closeButton{
          @include S(width, 15px);
          @include S(height, 15px);
          position: absolute;
          right: 8px;
          top: 8px;
        }
      }
    }

    &.optionChooserDialog{
      .optionParent{
        display: grid;
        @include S(grid-gap, 5px);
        grid-template-columns: 1fr 1fr;
        .option{
          pointer-events: all;
          cursor: pointer;
          @include S(padding, 10px);

          background: #eee;

          transition: background-color .12s ease-in-out;

          .desc{
            @include PlainText;
            display: block;
            color: #888;
          }

          &:hover{
            background-color: #e7e7e7;
          }

          &.active{
            background-color: $colorBlueBright;
            color: #fff;
          }
        }
      }
    }

    &.inputDialog{
      .inputParent{
        width: 100%;

        .input{
          margin-bottom: 10px;

          h4{
            @include Text;
            margin-bottom: 10px;
          }
        }
      }
    }

    > .title{
      @include Heading;
      margin: 0;
      text-transform: uppercase;
      display: flex;
      justify-content: space-between;
      align-items: center;
      @include S(margin-bottom, 12px);

      @include DarkThemeInvert();
      > .closeButton{
        @include S(width, 20px);
        @include S(height, 20px);
      }
    }

    > .content{
      @include Text;
      overflow-y: auto;
      pointer-events: all;
      @include S(width, 300px);
      text-align: left;

      @include DarkThemeOverride{
        color: #aaa;
      }

      a{
        color: $colorBlueBright;
      }

      strong{
        font-weight: bold;
      }

      .progress-bar{
        width: 100%;
        height: 5px;
        background-color: #f9e1e3;
        border-radius: 3px;
      }
      .progress{
        width: 0%;
        height: 100%;
        background-color: $colorRedBright;
        border-radius: 3px;
      }

      .textProgress{
        display: flex;
        justify-content: flex-end;
        @include S(margin-top, 10px);
      }

      label{
        display: block;
        @include S(margin-top, 6px);
        @include S(margin-bottom, 5px);
      }

      input{
        &.errored {
          background-color: rgb(250, 206, 206);

          &::placeholder {
            color: #fff;
            opacity: 0.8;
          }
        }
      }
    }

    > .buttons{
      @include S(margin-top, 15px);
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;

      > button{
        @include S(margin-left, 8px);
        @include Text;
        @include S(min-width, 60px);
        @include S(padding, 5px, 15px);
        @include S(margin-top, 5px);

        transition: opacity .12s ease-in-out;
        &:hover{
          opacity: .9;
        }

        &.good{
          background-color: $colorGreenBright;
          color: #fff;
        }

        &.bad{
          background-color: $colorRedBright;
          color: #fff;
        }

        &.timedButton{
          pointer-events: none;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          &::after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: unset;
            z-index: 5;
            content: " ";
            display: inline-block;
            background: rgba(#fff, 0.6);
            @include InlineAnimation(3s linear) {
              0% {
                width: 100%;
              }
              100% {
                width: 0%;
              }
            }
        }
        }
      }
    }
  }
}